<template>
	<!--页中的外层的容器(包裹器)可以使用id选择器,但是组件中的包裹器不要使用id选择器-->
	<view class="categoryContainer">
		<!--头部-->
		<view class="categoryHeader"><view class="search">搜索商品</view></view>
		<!--内容区域-->
		<view class="contentContainer">
			<view class="leftContainer">
				<scroll-view scroll-y="true" class="leftScroll">
					<view class="scrollItem" @click="navId=item.id" :class="{active:navId===item.id}" v-for="(item,index) in categoryList" :key="item.id">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="rightContainer">
				<scroll-view scroll-y="true" class="rightScroll">
					<view class="contentList">
						<image class="contentImg" :src="cateObj.imgUrl"></image>
						<view class="contentItem" v-for="(c,index) in cateObj.subCateList" :key="c.id">
							<image :src="c.wapBannerUrl"></image>
							<text>{{c.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
// 引入request
import request from '@/utils/request.js'
export default {
	name:'categorys',
	data() {
		return {
			categoryList:[],
			navId:''
		};
	},
	// 页面加载后的生命周期回调
	mounted() {
		this.getCategory()
	},
	methods: {
		async getCategory(){
			const result = await request('/getCategoryDatas')
			if(result.code === 200){
				this.categoryList = result.data
				this.navId = this.categoryList[0].id
			}
		}
	},
	computed:{
		cateObj(){
			return this.categoryList.find(item=>item.id === this.navId)
		}
	}
};
</script>

<style lang="stylus">
.categoryContainer
	.categoryHeader
		padding 10upx 0
		.search
			width 90%
			height 60upx
			line-height 60upx
			text-align center
			margin 0 auto
			border 1upx solid #ededed
			border-radius 10upx
			background-color #eee
			font-size 26upx
	.contentContainer
		display flex
		border-top 1upx solid #eee
		box-sizing border-box
		.leftContainer
			width 20%
			border-right 1upx solid #eee
			box-sizing border-box
			.leftScroll
				height calc(100vh - 80upx)
				.scrollItem
					font-size 28upx
					height 80upx
					line-height 80upx
					text-align center
					position relative
					&.active:after
						position absolute
						content ''
						height 60upx
						width 2upx
						background-color red
						top 10upx
						left 5upx
		.rightContainer
			width 80%
			.rightScroll
				height calc(100vh - 80upx)
				.contentList
					display flex
					flex-wrap wrap
					.contentImg
						width 520upx
						height 190upx
						margin 20upx auto
					.contentItem
						width 33.33%
						display flex
						flex-direction column
						align-items center
						image
							width 90%
							height 144upx
						text
							font-size 26upx
</style>
